// 总览页面样式 - 总览.less
// 使用rem单位，基于80px基准 (80px = 1rem)

// 变量定义
@primary-color: #4fc3f7;                    // 主色调 - 科技蓝色
@secondary-color: #81d4fa;                  // 辅助色 - 浅蓝色
@accent-color: #bbdefb;                     // 强调色 - 更浅的蓝色
@background-dark: #0f1c3c;                  // 深色背景 - 深蓝色
@background-light: #1a2d5a;                 // 浅色背景 - 中蓝色
@card-bg: rgba(22, 40, 75, 0.7);            // 卡片背景 - 半透明蓝色
@border-color: #2a4a7c;                     // 边框颜色 - 边框蓝
@text-color: #e0e0e0;                       // 文字颜色 - 浅灰色
@success-color: #4caf50;                    // 成功色 - 绿色
@error-color: #f44336;                      // 错误色 - 红色

// 混入(Mixins)
.card-shadow() {
  box-shadow: 0 0.1rem 0.3125rem rgba(0, 0, 0, 0.3);  // 卡片阴影效果
}

.hover-effect() {
  transform: translateY(-0.0625rem);                   // 悬停时向上移动效果
  box-shadow: 0 0.15rem 0.375rem rgba(0, 0, 0, 0.4);  // 悬停时阴影增强
  border-color: @primary-color;                       // 悬停时边框变主色调
}

.gradient-border() {
  background: linear-gradient(90deg, @primary-color, #1976d2);  // 渐变边框背景
}

.flex-center() {
  display: flex;                                       // 使用flex布局
  align-items: center;                                // 垂直居中
  justify-content: center;                            // 水平居中
}

// 仪表板头部样式
.dashboard-header {
  text-align: center;                                 // 文本居中
  margin-bottom: 0.375rem;                            // 底部外边距

  h1 {
    color: @primary-color;                            // 主标题颜色
    font-size: 0.45rem;                               // 主标题字体大小
    margin-bottom: 0.1rem;                            // 主标题底部间距
    text-shadow: 0 0 0.125rem rgba(79, 195, 247, 0.5); // 主标题文字阴影
  }

  p {
    color: @secondary-color;                          // 副标题颜色
    font-size: 0.25rem;                               // 副标题字体大小
  }
}

//// 统计容器样式 - 修改为三行布局
//.stats-container {
//  display: flex;                                      // 使用flex布局
//  flex-direction: column;                            // 垂直方向排列
//  gap: 0.3125rem;                                    // 子元素间距
//  //max-width: 20rem;                                  // 新的最大宽度
//  margin: 0 auto; // 水平居中
//  background-color: #cb1190;
//
//
//  width: 100%;
//  //所有内边距向我看齐！！！
//  padding: 0rem;                                // 添加内边距
//}

// 行样式
.stats-row {
  display: grid;                                     // 使用grid布局
  grid-template-columns: repeat(3, 1fr);            // 3列等分布局
  gap: 0.3125rem;                                    // 网格间距
  margin-bottom: 0.3125rem;                     // 第一行下面（与第二行）的间距

  &.double-width {                                   // 双倍宽度变体
    //grid-template-columns: 1fr;                   // 注释掉的单列布局
    grid-template-columns: repeat(2, 1fr);          // 改为2列布局
    gap: 0.3125rem;                                  // 网格间距

    .stat-card {
      //grid-column: 1 / -1;                        // 注释掉的跨列设置
      grid-column: auto;                             // 恢复自动列跨度
    }
  }
}

// 统计卡片样式
.stat-card {
  background: @card-bg;                              // 卡片背景色
  border-radius: 0.1875rem;                          // 卡片圆角
  padding: 0.3125rem;                                // 卡片内边距
  .card-shadow();                                    // 应用卡片阴影
  border: 0.0125rem solid @border-color;             // 卡片边框
  transition: all 0.3s ease;                         // 过渡动画效果
  position: relative;                                // 相对定位
  overflow: hidden;                                  // 溢出隐藏

  &::before {                                        // 卡片顶部装饰条
    content: '';                                     // 伪元素内容
    position: absolute;                              // 绝对定位
    top: 0;                                          // 顶部对齐
    left: 0;                                         // 左侧对齐
    width: 100%;                                     // 宽度100%
    height: 0.05rem;                                 // 装饰条高度
    .gradient-border();                              // 应用渐变背景
  }

  &:hover {                                          // 卡片悬停状态
    .hover-effect();                                 // 应用悬停效果
  }

  // 宽卡片样式（用于专家数据和供应商数据）
  &.wide-card {                                      // 宽卡片变体
    .card-content {
      display: grid;                                 // 使用grid布局
      grid-template-columns: 1fr 1fr;               // 2列等分
      //gap: 0.25rem;                               // 注释掉的原始间距
      gap: 0.2rem;                                   // 稍微减小间距
      align-items: start;                            // 顶部对齐
    }

    .main-stats {
      display: flex;                                 // 使用flex布局
      flex-direction: column;                       // 垂直方向排列
      //gap: 0.1875rem;                             // 注释掉的原始间距
      gap: 0.15rem;                                  // 稍微减小间距
    }

    .detail-stats {
      display: flex;                                 // 使用flex布局
      flex-direction: column;                       // 垂直方向排列
      //gap: 0.125rem;                              // 注释掉的原始间距
      gap: 0.1rem;                                   // 稍微减小间距
    }
  }
}

// 卡片头部样式
.card-header {
  .flex-center();                                    // 应用居中布局
  align-items: center;                              // 垂直居中
  margin-bottom: 0.25rem;                           // 底部外边距
}

// 卡片图标样式
.card-icon {
  width: 0.5rem;                                     // 图标容器宽度
  height: 0.5rem;                                    // 图标容器高度
  border-radius: 50%;                               // 圆形图标
  .flex-center();                                    // 应用居中布局
  margin-right: 0.15rem;                            // 右侧外边距
  font-size: 0.3rem;                                // 图标大小
  background: rgba(79, 195, 247, 0.1);              // 图标背景色
  color: @primary-color;                            // 图标颜色
}

// 卡片标题样式
.card-title {
  font-size: 0.275rem;                              // 标题字体大小
  color: @secondary-color;                          // 标题颜色
  font-weight: 600;                                 // 标题字体粗细
}

// 主数值样式
.main-value {
  font-size: 0.4rem;                                // 主数值字体大小
  font-weight: 700;                                 // 主数值字体粗细
  color: @primary-color;                            // 主数值颜色
  margin-bottom: 0.0625rem;                         // 底部外边距
  text-shadow: 0 0 0.1rem rgba(79, 195, 247, 0.3); // 主数值文字阴影
}

// 数值单位样式
.value-unit {
  font-size: 0.25rem;                               // 单位字体大小
  color: @accent-color;                             // 单位颜色
  margin-left: 0.0625rem;                           // 左侧外边距
}

// 卡片描述样式
.card-description {
  color: @accent-color;                             // 描述文字颜色
  font-size: 0.2375rem;                             // 描述字体大小
  margin-top: 0.125rem;                             // 顶部外边距
  line-height: 1.5;                                 // 行高
}

// 详情列表样式
.detail-list {
  list-style: none;                                 // 去除列表样式
  margin: 0;                                        // 去除外边距

  li {
    padding: 0.1rem 0;                              // 列表项内边距
    border-bottom: 0.0125rem solid rgba(42, 74, 124, 0.5); // 列表项底部边框
    display: flex;                                  // 使用flex布局
    justify-content: space-between;                 // 两端对齐

    &:last-child {                                  // 最后一个列表项
      border-bottom: none;                          // 去除底部边框
    }
  }
}

// 详情标签样式
.detail-label {
  color: @accent-color;                             // 标签颜色
  font-size: 0.225rem;                              // 标签字体大小
}

// 详情数值样式
.detail-value {
  color: @text-color;                               // 数值颜色
  font-weight: 600;                                 // 数值字体粗细
  font-size: 0.225rem;                              // 数值字体大小
}

// 趋势指示器样式
.trend-indicator {
  display: inline-flex;                             // 内联flex布局
  align-items: center;                              // 垂直居中
  font-size: 0.225rem;                              // 指示器字体大小
  padding: 0.0375rem 0.1rem;                        // 指示器内边距
  border-radius: 0.15rem;                           // 指示器圆角
  margin-left: 0.125rem;                            // 左侧外边距
}

// 上升趋势样式
.trend-up {
  background: rgba(76, 175, 80, 0.2);               // 上升趋势背景色
  color: @success-color;                            // 上升趋势文字颜色
}

// 下降趋势样式
.trend-down {
  background: rgba(244, 67, 54, 0.2);               // 下降趋势背景色
  color: @error-color;                              // 下降趋势文字颜色
}

// 进度条样式
.progress-bar {
  height: 0.12rem;                                  // 进度条高度
  background: rgba(42, 74, 124, 0.5);               // 进度条背景色
  border-radius: 0.0375rem;                         // 进度条圆角
  margin-top: 0.125rem;                             // 顶部外边距
  overflow: hidden;                                 // 溢出隐藏
}

// 进度填充样式
.progress-fill {
  height: 100%;                                     // 填充高度100%
  border-radius: 0.0375rem;                         // 填充圆角
  .gradient-border();                               // 应用渐变背景
}

// 卡片底部样式
.card-footer {
  margin-top: 0.1875rem;                            // 顶部外边距
  font-size: 0.2125rem;                             // 底部文字大小
  color: @secondary-color;                          // 底部文字颜色
  text-align: right;                                // 文字右对齐
}

// 居中容器
.center-container {
  display: flex;                                    // 使用flex布局
  justify-content: center;                          // 水平居中
  width: 100%;                                      // 宽度100%
}

// 双列布局，宽度与第一行一致
.stats-row.double-width {
  display: grid;                                    // 使用grid布局
  grid-template-columns: repeat(2, 1fr);           // 2列等分
  gap: 0.3125rem;                                   // 网格间距
  width: 100%;                                      // 宽度100%
  //max-width: 20rem;                                 // 最大宽度与容器一致

  .stat-card {
    grid-column: auto;                              // 自动列跨度
  }
}

// 响应式调整
@media (max-width: 9.6rem) {                        // 768px断点
  .stats-row.double-width {
    grid-template-columns: 1fr;                     // 单列布局
    max-width: 100%;                                // 最大宽度100%
  }

  .center-container {
    justify-content: stretch;                       // 拉伸对齐
  }

  .main-value {
    font-size: 0.35rem;                             // 调整主数值字体大小
  }

  .card-header {
    flex-direction: column;                         // 垂直排列
    text-align: center;                             // 文字居中
  }

  .card-icon {
    margin-right: 0;                                // 去除右侧外边距
    margin-bottom: 0.125rem;                        // 添加底部外边距
  }
}

// 动画类
.animated-number {
  animation: countUp 1s ease-out;                   // 数字计数动画
}

@keyframes countUp {                                // 数字计数动画关键帧
  from {
    opacity: 0;                                     // 起始透明度
    transform: translateY(0.125rem);                // 起始位置
  }
  to {
    opacity: 1;                                     // 结束透明度
    transform: translateY(0);                       // 结束位置
  }
}

// 卡片进入动画
.card-entrance {
  animation: cardSlideIn 0.6s ease-out;             // 卡片滑入动画
}

@keyframes cardSlideIn {                            // 卡片滑入动画关键帧
  from {
    opacity: 0;                                     // 起始透明度
    transform: translateY(0.375rem);                // 起始位置
  }
  to {
    opacity: 1;                                     // 结束透明度
    transform: translateY(0);                       // 结束位置
  }
}

/* === 响应式设计 - 移动设备适配 === */
@media (max-width: 768px) {                         // 移动端断点
  /* 在屏幕宽度小于768px时应用的样式 */
  .nav-container {
    flex-direction: column;                         /* 垂直排列 */
    align-items: center;                            /* 居中对齐 */
  }

  .nav-item {
    width: 90%;                                     /* 宽度90% */
    text-align: center;                             /* 文本居中对齐 */
  }

  h1 {
    font-size: 1.8rem;                              /* 标题字体大小调整为1.8rem */
  }
}


/* iframe 容器样式 - 修复版 */
.iframe-container {
  width: 100%;
  height: calc(100vh - 120px); /* 调整高度计算 */
  overflow: auto; /* 改为可滚动 */
  background: transparent;
  position: relative;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  display: block;
}

/* 确保采购分析页面在 iframe 中正常显示 */
#iframe-procurement {
  pointer-events: auto; /* 启用所有交互 */
}



// 数据范围选择器样式
.data-scope-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.375rem;
  padding: 0.25rem;
  background: rgba(22, 40, 75, 0.5);
  border-radius: 0.1875rem;
  border: 1px solid @border-color;
  gap: 0.25rem;

  .scope-text {
    color: @accent-color;
    font-size: 0.2375rem;
    white-space: nowrap;
  }

  .highlight-text {
    color: @primary-color;
    font-weight: 600;
  }

  .scope-dropdown {
    background: rgba(30, 60, 114, 0.7);
    border: 1px solid @border-color;
    border-radius: 0.125rem;
    color: @text-color;
    padding: 0.125rem 0.25rem;
    font-size: 0.2rem;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 2.5rem;

    &:hover {
      border-color: @primary-color;
    }

    &:focus {
      border-color: @primary-color;
      box-shadow: 0 0 0.125rem rgba(79, 195, 247, 0.5);
    }

    option {
      background: @background-light;
      color: @text-color;
      padding: 0.125rem;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .data-scope-selector {
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.1875rem;

    .scope-text {
      font-size: 0.2rem;
      text-align: center;
    }

    .scope-dropdown {
      width: 100%;
      max-width: 12.5rem;
    }
  }
}